多页面应用MPA与单页面应用SPA的区别

您所在的位置:网站首页 implementing dccstore on multi page app 多页面应用MPA与单页面应用SPA的区别

多页面应用MPA与单页面应用SPA的区别

2023-07-10 04:23| 来源: 网络整理| 查看: 265

多页面应用(MPA)Multi-page Application

多页面跳转需要刷新所有资源,每个公共资源(js、css等)需选择性重新加载 页面跳转:使用window.location.href = “./index.html"进行页面间的跳转; 数据传递:可以使用path?account=“123”&password=”"路径携带数据传递的方式,或者localstorage、 cookie等存储方式

单页面应用(SPA)MPA Multi-page Application

通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。多应用于pc端。

多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新

只有一张Web页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次 页面跳转:使用js中的append/remove或者show/hide的方式来进行页面内容的更换; 数据传递:可通过全局变量或者参数传递,进行相关数据交互

单页面的优点:

1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小

2,前后端分离

3,页面效果会比较炫酷(比如切换页面内容时的专场动画)

单页面缺点:

1,不利于seo

2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退 功能,所以需要自己建立堆栈管理)

3,初次加载时耗时多

单页面与多页面的区别:

路由模式 单页应用: 可以使用 hash ,也可以使用 history

多页应用: 普通链接跳转 href

数据传递:单页应用 因为单页面,使用全局变量就好(Vuex)

数据传递:多页应用 cookie 、localStorage 等缓存方案,URL 参数,调用接口保存等



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3